<template>
    <div class="msg_info full">
        <ul v-show="!empty">
            <li class="padding-15" v-for="(it,i) in msg_list" :key="i">
                <div class="bgfff bor-r">
                    <p>{{it.systemValues}}</p>
                    <div class="font-12 c82 flex-col">
                        <div class="box1 flex-col flex-middle">{{it.createTime | toTime('yyyy-MM-dd')}}</div>
                        <div class="btn" @click="remove(it.systemCode,i)">
                            <i class="iconfont icon-shanchu f-r"></i>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="empty full box-center bgfff font-16" v-show="!msg_list.length">
            <div class="img-bg margin-b20" :style="{backgroundImage:`url(${emptyImg})`,backgroundColor:'#fff'}"></div>
            <p>您暂时没有任何消息哦~</p>
        </div>
    </div>
</template>

<script>
export default {
  name: "msg_info",
  data() {
    return {
      emptyImg: require("../../image/empty.png"),
      msg_list: []
    };
  },
  components: {},
  watch: {},
  computed: {
    //计算属性
  },
  created() {
    //实例创建钩子
  },
  mounted() {
    //首次渲染钩子
    let that = this;
    this.$nextTick(() => {
      that.getList(that.$route.params.id);
    });
  },
  methods: {
    //自定义函数
    remove(id, i) {
      let that = this;
      this.http
        .get("systemmassege/delete", {
          systemCode: id
        })
        .then(res => {
          this.msg_list.splice(i, 1);
          if (that.msg_list.lenght === 0) {
            that.empty = true;
          } else {
            that.empty = false;
          }
        });
    },
    getList(id, has = false) {
      let that = this;
      let page = this.hasPage(has);
      this.http
        .get("systemmassege/list", {
          massegeType: id,
          page,
          limit: that.limit
        })
        .then(res => {
          that.totalPage = res.totalPage;
          if (has) {
            that.msg_list.push(res.data.list);
          } else {
            that.msg_list = res.data.list;
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.msg_info {
  li {
    padding: 0.15rem 0.1rem 0;
    & > div {
      padding: 0.15rem 0.1rem 0;
      p {
        line-height: 0.18rem;
      }
    }
    .btn {
      padding: 0.1rem 0.15rem;
    }
  }
  .empty {
    div {
      width: 2rem;
      height: 2rem;
    }
    p{
        padding-bottom: 2rem;
    }
  }
}
</style>
